<template>
  <el-dialog :visible.sync="_show"
             append-to-body
             :close-on-click-modal="false">
    <div class="ke__margin">
      <el-input placeholder="输入公司名搜索" size="small" v-model="key" @keyup.enter.native="onLoad">
        <template slot="append">
          <el-button @click="onLoad" :loading="loading">
            {{ loading ? '搜索中' : '搜索' }}
          </el-button>
        </template>
      </el-input>
    </div>

    <!-- 列表 -->
    <div class="data-list" v-show="list.length">
      <ul>
        <li v-for="item in list" :key="item.id">
          <el-row>
            <el-col :span="10">
              {{ item.name }}
            </el-col>
            <el-col :span="10">
              {{ item.boss }}
            </el-col>
            <el-col :span="4" style="text-align: right">
              <el-button size="small" type="text" @click="onClickSelect(item)">选择</el-button>
            </el-col>
          </el-row>
        </li>
      </ul>

      <div class="data-list-more" @click="onLoadMore">
        <span v-show="loading">正在加载</span>
        <span v-show="!loading">加载更多</span>
        <span v-show="finished">没有更多了</span>
      </div>
    </div>

    <!-- 数据 -->
    <div class="data-empty" v-show="list.length === 0">
      无数据
    </div>

  </el-dialog>
</template>

<script>
export default {
  name: 'index-company',
  props: {
    show: Boolean
  },
  computed: {
    _show: {
      get () {
        return this.show
      },
      set (val) {
        this.$emit('update:show', val)
      }
    }
  },
  data () {
    return {
      key: '',
      list: [],
      page: 0,
      limit: 10,
      loading: false,
      finished: false
    }
  },
  mounted () {

  },
  methods: {
    // 加载列表
    onLoad () {
      if (this.key === '') {
        this.$message.error('请输入关键字搜索')
        return
      }
      this.page++
      this.loading = true
      this.$http.get('admin/companys', {
        key: this.key,
        page: this.page,
        limit: this.limit
      })
        .finally(() => this.loading = false)
        .then((result) => {
          this.list = this.list.concat(result.list)
          if (this.list.length >= result.total) {
            this.finished = true
          }
        })
    },
    // 加载更多
    onLoadMore () {
      if (!this.loading && !this.finished) {
        this.onLoad()
      }
    },
    // 选择元素
    onClickSelect (item) {
      this.$emit('select', item)
      this._show = false
    }
  }
};
</script>

<style scoped lang="scss">
  .data-list {
    height: 350px;
    overflow: auto;
    ul {
      list-style: none;
      padding: 10px 0;
    }
    li {
      line-height: 45px;
      padding: 0 10px;
      &:hover {
        background: #f6f6f6;
      }
    }
    &-more {
      text-align: center;
      color: #666;
      cursor: pointer;
      padding: 10px;
      border: solid 1px #efefef;
      &:hover {
        color: #ff8b12;
      }
    }
  }
  .data-empty {
    text-align: center;
    line-height: 200px;
    color: #999;
  }
</style>
